<template>
  <div class="common-table-container">
    <el-table
      v-loading="loading"
      :data="tableData"
      :height="height"
      style="width: 100%"
      :row-key="rowKey"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="showSelection"
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        v-if="showIndex"
        type="index"
        width="55"
        align="center"
        :index="indexMethod"
      ></el-table-column>
      <slot></slot>
    </el-table>
    <div class="pagination-container" v-if="showPagination && total > 0">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size.sync="pageSize"
        :current-page.sync="currentPage"
        :page-sizes="pageSizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100]
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    showSelection: {
      type: Boolean,
      default: false
    },
    showIndex: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: [String, Function],
      default: 'id'
    },
    height: {
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    handleSizeChange(size) {
      this.$emit('size-change', size);
    },
    handleCurrentChange(current) {
      this.$emit('current-change', current);
    },
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection);
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    }
  }
};
</script>

<style scoped>
.common-table-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pagination-container {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>